<template>
<div class="m-content">
	<AppHeader></AppHeader>
	<div class="m-login">
		<div class="warp">
			<div class="m-login-content f-cb">
				<div class="m-login-tab f-cb">
					<ul>
						<!-- <li v-for="(item,index) in tabName"  v-on:click="onCheck(index)" v-bind:class="{ loginAct: !item.isShow }">{{ item.type }}</li> !-->
						<li class="loginAct">账号登录</li>
					</ul>
				</div>
				<div class="m-login-form f-cb" v-bind:class="{ hidden: tabName[0].isShow }">
					<div class="m-form-gloup">
						<input type="text" class="m-username" name="username" v-model="userAcc" value="949292813@qq.com"  placeholder="请输入用户名" />
						<i class="icon-username"></i>
						<p class="m-form-error">{{ validation.firstError('userAcc') }} {{ username }}</p>
					</div>
					<div class="m-form-gloup">
						<input type="password" class="m-password" name="password" v-model="userPwd" value="123456"  placeholder="请输入密码" />
						<i class="icon-password"></i>
						<p class="m-form-error">{{ validation.firstError('userPwd') }} {{ password }}</p>
					</div>
					<div class="m-form-gloup f-cb">
						<div class="m-login-code">
							<div class="m-code-left">
								<input type="text" class="m-code" name="code" value="4518" v-model="verifyCode"  placeholder="请输入图形验证码" />
								
							</div>
							<img class="m-verifyimg reloadverify" v-bind:src=imgcode @click="test" alt="点击切换" width="125" height="48">
						</div>
						<p class="m-form-error">{{ validation.firstError('verifyCode') }} {{ code }}</p>
					</div>
					<div class="m-login-btn" @click="loginBtn" @keyup.enter="loginBtn">登录</div>
					<div class="m-login-link f-cb">
						<a href="/register" class="login-link-left">还没有账号？立即注册</a> <a href="" class="login-link-right">忘记密码？</a>	
					</div>					
				</div>
			</div>
		</div>
	</div>
	<Footer></Footer>	
</div>	
</template>
<script>
	import Vue from 'vue';
	import { Message } from 'element-ui';
	import AppHeader from '@/components/Header';
	import Footer from '@/components/Footer';
	var SimpleVueValidation = require('simple-vue-validator');
	var Validator = SimpleVueValidation.Validator;
	Vue.use(SimpleVueValidation);	
	export default {
		name: 'login',
		components: {
		  AppHeader,
		  Footer, 
		},
		data () {
			return {
			  tabName:[
			      {
			      	type: '账号登录',
			    	isShow: false,
			      }
			  ],
			  'userAcc':'',
			  'userPwd':'',
			  'verifyCode':'',
			  'username':'',
			  'password':'',
			  'code':'',
			  'imgcode':'/yan-web/code/verificationCode',
			}
		},
		validators:{
			userAcc: function(value) {
	 			var that = this;
	        	return Validator.custom(function () {
	        		if(Validator.isEmpty(value)){
	        			return '请输入用户名';
	        		};
		        });
	      	},
	      	userPwd:function(value){
	        	return Validator.custom(function () {
	        		if(Validator.isEmpty(value)){
	        			return '密码不能为空';
	        		}
		        });	      	
	      	},
	      	verifyCode:function(value){
	        	return Validator.custom(function () {
	        		if(Validator.isEmpty(value)){
	        			return '验证码不能为空';
	        		}
		        });		      		
	      	}	      	
		},
		created:function(){
		// 主页添加键盘事件,注意,不能直接在焦点事件上添加回车
			var that=this;
			that.checkCookie();
			document.onkeydown=function(e){
				var key=window.event.keyCode;
				if(key==13){
					that.loginBtn();
				}
			}
		},	
		methods: {
            checkCookie: function () {
                var userinfo = this.getCookie("userinfo");
            },            
			loginBtn:function(){
				var that = this;
		        that.$validate()//验证
		        .then(function (success) {
		        	var result = {
						'userAcc':that.userAcc,
						'userPwd':that.userPwd,
						'verifyCode':that.verifyCode,
					};
		        	if(success) {
		        		var data = new FormData();
		        		data.append('userAcc', that.userAcc);
		        		data.append('userPwd', that.userPwd);
		        		data.append('verifyCode', that.verifyCode);
						that.axios.post('/yan-web/volunteers/login',data,{
						    headers: {
						          'Content-Type': 'multipart/form-data'
						    }
						})
						.then(function (response) {
							if(response.data.status){
								if(response.data.model.status == '2'){
									that.$message({
							          message: '恭喜你，登录成功！',
							          type: 'success'
		        					});
		        					var result = JSON.stringify(response.data.model)
		        					that.setCookie('userinfo', result, 365);
			        				if(response.data.model.role=='1'){
										that.$router.push({ path: '/orderzj'});
									}else{
										that.$router.push({ path: '/order'});
									}
								}else if(response.data.model.status == '0'){
									that.$message({
							          message: '账号还未开通,正在审核中,请耐心等待！',
							          type: 'error'
		        					});
									that.code='';
								}else{
									that.$message({
							          message: '账号被冻结！',
							          type: 'error'
		        					});	
								}
							}else{
								if(response.data.message == '1'){
									that.username="账户名不存在";
								}else if(response.data.message == '2'){
									that.password="密码错误";
								}else if(response.data.message == '3'){
									that.code="验证码错误";
								}
							}
						})		        		
		        	}
		        });
				
			},
			test:function(){
				var timestamp = Date.parse(new Date());
				var that = this;
				that.axios.get('/yan-web/code/verificationCode',{
				    headers: {
				          'Content-type': 'application/json;charset=UTF-8'
				    }
				}) 
				.then(function (response) {
					that.imgcode = '/yan-web/code/verificationCode?timestamp='+ timestamp ;
				})	

			}			
		}
	}	
</script>

